<template>
  <div>
    <div v-if="!token" class="login">
      <img :src="`data:image/gif;base64,${form.image}`" v-if="form.image" />
      <div>
        <input type="text" v-model="form.code" />
      </div>
      <div>
        <button @click="login">登录</button>
      </div>
    </div>
    <div v-else>
      <div style="display: flex">
        <el-input v-model="noticeTitle" placeholder="请输入标题"></el-input>
        <el-button type="primary" @click="getNoticeList">刷新</el-button>
      </div>
      <!-- v-loading="loading"自定义指令,绑定,数据 -->
      <el-table v-loading="loading" :data="tableData" style="width: 100%">
        <el-table-column prop="noticeId" label="序号" width="180" />
        <el-table-column prop="remark" label="备注" width="180" />
        <el-table-column prop="noticeTitle" label="通知标题" width="180" />
        <el-table-column prop="noticeType" label="通知类型" width="180" />
        <el-table-column prop="status" label="通知状态" width="180" />
        <el-table-column prop="address" fixed="right" label="Operations" min-width="120" v-slot="{row}">
            <el-button link type="danger" size="small" @click="delNoticeList(row.noticeId)">
              Del
            </el-button>
            <el-button link type="danger" size="small" @click="changeNoticeList(row.noticeId)">
              change
            </el-button>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <el-form ref="formRef" style="max-width: 600px" :model="notice" label-width="auto">
        <el-form-item prop="noticeContent" label="通知内容">
          <el-input v-model="notice.noticeContent" />
        </el-form-item>
        <el-form-item prop="noticeTitle" label="通知标题">
          <el-input v-model="notice.noticeTitle" />
        </el-form-item>
        <el-form-item prop="noticeType" label="通知类型">
          <el-input v-model="notice.noticeType" />
        </el-form-item>
        <el-form-item prop="status" label="通知状态">
          <el-input v-model="notice.status" />
        </el-form-item>
        <el-button type="primary" @click="pushNoticeList">Create</el-button>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">

const notice = ref<RootObject>({
  noticeId: '',
  noticeTitle: '',
  noticeType: '',
  noticeContent: '',
  status: ''
})

interface RootObject {
  noticeId: string,
  noticeTitle: string
  noticeType: string
  noticeContent: string
  status: string
}


const pushNoticeList = async () => {
  const { data } = await axios.post(`${baseUrl}/system/notice`, notice.value, {
    headers: {
      Authorization: `Bearer ${token.value}`
    }
  })
  console.log(notice)

  console.log(data)
}



import axios from 'axios'
import { pa } from 'element-plus/es/locales.mjs';
import { ref, reactive } from 'vue'

const baseUrl = `http://119.29.41.94:8080`
const loading = ref(true)
const form = ref({
  code: '',
  uuid: '',
  username: 'admin',
  password: 'admin123',
  image: ''
})

/* 用户自己输入的数据：通知标题标题 */
const noticeTitle = ref('')
const token = ref()
const tableData = ref()
const delNoticeList = async (noticeId: number) => {
  const { data } = await axios.delete(`${baseUrl}/system/notice/${noticeId}`, {
    headers: {
      Authorization: `Bearer ${token.value}`
    }
  })
  console.log(data);
  console.log(noticeId);

}
const changeNoticeList = async (noticeId: number) => {
  const {data} = await axios.get(`${baseUrl}/system/notice/${noticeId}`, {
    // Object.assign(notice.value, { noticeId: noticeId }),
    headers: {
      Authorization: `Bearer ${token.value}`
    }
  })
  console.log(data);
  console.log(noticeId);

}
/*
  1.获取验证码
  2.登录获取token
  3.获取数据,带token  
 */
const getCode = async () => {
  const { data } = await axios.get(`${baseUrl}/captchaImage`)
  form.value.image = data.img
  form.value.uuid = data.uuid
  console.log(data)
}
const login = async () => {
  const { data } = await axios.post(`${baseUrl}/login`, form.value)
  token.value = data.token
  getNoticeList()
}

const getNoticeList = async () => {
  loading.value = true
  const { data } = await axios.get(`${baseUrl}/system/notice/list`, {
    /* parmas 路径传参 ，第一种方式*/
    params: {
      /* 路径上的参数 */
      noticeTitle: noticeTitle.value
    },
    headers: {
      Authorization: `Bearer ${token.value}`
    }
  })
  console.log(data)

  tableData.value = data.rows
  loading.value = false
}

getCode()
</script>

<style lang="scss" scoped>
.login {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
</style>
